<template>
  <div>
    <div class="datamap">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>平均分统计</span>
            </div>
            <div id="one"></div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>及格人数</span>
            </div>
            <div id="two"></div>
          </el-card>
        </el-col>
      </el-row>
    </div>

  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "InformationManage",

  data() {
    return {
      subjects: [],
      scores: [],
      arr:[]
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.initData();
      setTimeout(() => {
        this.initCharOne();
        this.initCharTwo();
      }, 200);
    },
    initData() {
      var that = this;
      //查询所有科目
      this.$http.get("/grades/selectSubjects")
          .then(function (response) {
            // console.log(response.data.data);
            that.subjects = response.data.data;
            // console.log(that.subjects);
          }).catch(function (error) {
        console.log(error);
      })
      //查询科目的平均分
      this.$http.post("/grades/selectScores")
          .then(function (response) {
            // console.log(response.data.data);
            that.scores = response.data.data;
            // console.log(that.scores)
          }).catch(function (error) {
        console.log(error);
      })
      //查询及格的人数
      this.$http.get("/grades/selectPass")
          .then(function (response) {
            // console.log(response.data.data);
            response.data.data.forEach((item)=>{
              that.arr.push({
                value: item.number,
                name: item.gradesSubjects
              })
            })
            // console.log(that.arr);
          }).catch(function (error) {
        console.log(error);
      })
    },
    //柱状图
    initCharOne() {
      // console.log(this.subjects);
      const option = {
        xAxis: {
          type: 'category',
          data: this.subjects
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.scores,
            type: 'bar'
          }
        ]
      };
      var myChartOne = this.$echarts.init(document.getElementById("one")); //图标初始化\
      myChartOne.setOption(option);
      window.onresize = function () {
        myChartOne.resize();
      };
    },
    //饼状图
    initCharTwo() {
      const option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
        },
        series: [
          {
            name: '及格人数',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.arr
          }
        ],
      };
      var myChartTwo = this.$echarts.init(document.getElementById("two"));
      myChartTwo.setOption(option);
      window.onresize = function () {
        myChartTwo.resize();
      };
    },
  }
}
</script>

<style scoped>
.datamap #one {
  height: 500px;
}

.datamap #two {
  height: 500px;
}
</style>